let url = window.location.href
let index = url.indexOf('=')
let id = url.substring(index + 1);

pAjax({
  url: '../server/id_select.php',
  type: 'post',
  data: {
    dataId: id
  }
}).then(function (res) {
  let arr = JSON.parse(res)
  let top = document.querySelector('.detailtop')
  let title = document.querySelector('title')
  title.innerHTML=`${arr.goods_name}`
  top.innerHTML = `
  <h2>${arr.goods_name}</h2>
  <div class="topmain">
    <div class="spimg">
      <div class="spimgbox">
        <img src="${arr.goods_small_logo}" alt="">
      </div>
      <ul class="minlist">
        <li class="liactive"><img src="${arr.goods_big_logo}" alt=""></li>
      </ul>
    </div>
    <div class="sppric">
      <div class="spinfotop">
        <div>
          <p>销售价：</p><span>￥${arr.goods_price}</span><i>(节省￥2.5)</i>
        </div>
        <div>
          <p>市场价：</p><s>￥${arr.goods_price}</s>
        </div>
        <div>
          <p>会员价：</p><i>最低￥${arr.goods_price}起</i>
        </div>
        <div>
          <p>商品评分：</p>
          <b class="iconfont icon-xingxing"></b>
          <b class="iconfont icon-xingxing"></b>
          <b class="iconfont icon-xingxing"></b>
          <b class="iconfont icon-xingxing"></b>
          <b class="iconfont icon-xingxing"></b>
          <i>共0人评论</i>
        </div>
      </div>
      <div class="spinfobot">
        <div class="id">
          <p>货品编号：${arr.goods_id}</p>
          <span>品牌：${arr.cat_id}</span>
        </div>
        <div class="size">
          <p>规格：<span>${arr.goods_weight}</span></p>
          <div class="spnum">
            数量：
            <div class="count">
              <div class="sub">-</div>
              <input type="text" value="1">
              <div class="sum">+</div>
            </div>
          </div>
          <div class="buybtn">
            <div>立即购买</div>
            <div class="addbuy">加入购物车</div>
          </div>
        </div>
      </div>
    </div>
  </div>
  `

  let areatitle = document.querySelector('.areatitle')
  areatitle.innerHTML = `
  <p>品牌：${arr.cat_id}</p>
  <p>所属分类：${arr.cat_three_id}</p>
  <p>商品编号：${arr.goods_id}</p>
  `

  let detaimg = document.querySelector('.detaimg')
  detaimg.innerHTML = `
  <img src="${arr.goods_big_logo}" alt="">
  `

  // 加减
  let count = document.querySelector('.count')
  let sub = count.querySelector('.sub')
  let sum = count.querySelector('.sum')
  let ipt = count.querySelector('input')
  sub.addEventListener('click', function () {
    if (ipt.value > 1) {
      ipt.value--
    } else {
      ipt.value = 1
    }
  })
  sum.addEventListener('click', function () {
    ipt.value++
  })
  // 点击加入购物车
  let addbuy = document.querySelector('.addbuy')

  addbuy.addEventListener('click', function () {
    let flag = true
   let carArr = JSON.parse(localStorage.getItem('shopArr'))||[]
    carArr.forEach(ele => {
      if (ele.goods_id === id) {
        ele.count += parseInt(ipt.value)
        flag = false
      }
    })
    if (flag) {
      carArr.push({
        count: parseInt(ipt.value),
        flag: true,
        ...arr
      })
    }

    localStorage.setItem('shopArr', JSON.stringify(carArr))
    alert('成功加入购物车')
  })
})

// 左侧推荐
var oUl = document.querySelectorAll('.itemmainr')
oUl.forEach((ele) => {
  pAjax({
    url: '../server/random.php',
    type: 'get'
  }).then((res) => {
    var randArr = JSON.parse(res)
    blow(ele, randArr)
  })
})

// tab切换
let tabp = document.querySelector('.tab')
let tabs = tabp.querySelectorAll('li')
let areas = document.querySelectorAll('.area')
tabs.forEach(function (e, index) {
  e.addEventListener('click', function () {
    for (let i = 0; i < tabs.length; i++) {
      tabs[i].className = ''
      areas[i].style.display = 'none'
    }
    this.className = 'tabac'
    areas[index].style.display = 'block'
  })
})